<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<script src="<%=request.getContextPath() %>/static/pages/js/sysIpStats.js?v=3.1415926" type="text/javascript"></script>

<div class="portlet-body">

    <label for="dateTime" class="col-sm-2 control-label">时间：</label>
    <div class="col-sm-10">
    <input name="dateTime" id="dateTime" class="form-control datepicker" value="" data-date-format="yyyy-mm-dd" />
    </div>
    <label for="token" class="col-sm-2 control-label">令牌：</label>
    <div class="col-sm-10">
    <select name="token" id="token" class="form-control">
        <option value="">全部</option>
        <c:forEach items = "${SysToken}" var="token">
            <option value="${token.token}">${token.token}</option>
        </c:forEach>
    </select>
    </div>
    <input type="button" id="ipEcharts" onclick="showIpEcharts()" value="统计"  class="btn green-jungle"/>
</div>

<div id="main" style="width: 600px;height:400px;"></div>

<script>

    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : [],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'访问次数',
                type:'bar',
                barWidth: '60%',
                data:[]
            }
        ]
    };

    function showIpEcharts() {
        $.ajax({
            type: 'get',
            url: "/sysIpStats/echartsData",
            data: {"date":$("#dateTime").val(),"token":$("#token").val()},
            dataType: 'json',
            success: function (data) {
                    for(var i=0,len=data.length;i<len;i++){
                        option.xAxis[0].data.push(data[i].ip);
                        option.series[0].data.push(data[i].number);
                    }
                    myChart.setOption(option);
                    option.xAxis[0].data=[];
                    option.series[0].data=[];
            }
        });
    }



</script>